// components/loading-state/loading-state.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 加载状态类型：loading, empty, error, success
    type: {
      type: String,
      value: 'loading'
    },
    
    // 是否显示
    show: {
      type: Boolean,
      value: false
    },
    
    // 加载文本
    loadingText: {
      type: String,
      value: '加载中...'
    },
    
    // 空状态标题
    emptyTitle: {
      type: String,
      value: '暂无数据'
    },
    
    // 空状态描述
    emptyDesc: {
      type: String,
      value: ''
    },
    
    // 空状态图标
    emptyIcon: {
      type: String,
      value: '📝'
    },
    
    // 错误标题
    errorTitle: {
      type: String,
      value: '加载失败'
    },
    
    // 错误描述
    errorDesc: {
      type: String,
      value: '请检查网络连接'
    },
    
    // 错误图标
    errorIcon: {
      type: String,
      value: '⚠️'
    },
    
    // 成功文本
    successText: {
      type: String,
      value: '操作成功'
    },
    
    // 成功图标
    successIcon: {
      type: String,
      value: '✅'
    },
    
    // 是否显示重试按钮
    showRetryBtn: {
      type: Boolean,
      value: true
    },
    
    // 重试按钮文本
    retryBtnText: {
      type: String,
      value: '重试'
    },
    
    // 是否显示操作按钮
    showActionBtn: {
      type: Boolean,
      value: false
    },
    
    // 操作按钮文本
    actionBtnText: {
      type: String,
      value: '去添加'
    },
    
    // 加载器类型：spinner, circular, dots
    loaderType: {
      type: String,
      value: 'spinner'
    },
    
    // 加载器大小
    loaderSize: {
      type: String,
      value: '40rpx'
    },
    
    // 加载器颜色
    loaderColor: {
      type: String,
      value: '#ff6b9d'
    },
    
    // 自定义样式类
    customClass: {
      type: String,
      value: ''
    },
    
    // 是否全屏显示
    fullscreen: {
      type: Boolean,
      value: false
    },
    
    // 背景颜色
    backgroundColor: {
      type: String,
      value: '#f5f5f5'
    },
    
    // 自动隐藏时间（毫秒，0表示不自动隐藏）
    autoHide: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    visible: false,
    animating: false,
    timer: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 重试操作
     */
    onRetry() {
      this.triggerEvent('retry')
    },
    
    /**
     * 操作按钮点击
     */
    onAction() {
      this.triggerEvent('action')
    },
    
    /**
     * 显示组件
     */
    show() {
      this.setData({
        visible: true,
        animating: true
      })
      
      // 设置自动隐藏
      if (this.properties.autoHide > 0) {
        this.setAutoHide()
      }
      
      // 添加显示动画
      setTimeout(() => {
        this.setData({ animating: false })
      }, 300)
    },
    
    /**
     * 隐藏组件
     */
    hide() {
      this.setData({ animating: true })
      
      setTimeout(() => {
        this.setData({
          visible: false,
          animating: false
        })
      }, 300)
      
      this.clearAutoHide()
    },
    
    /**
     * 设置自动隐藏
     */
    setAutoHide() {
      this.clearAutoHide()
      
      this.data.timer = setTimeout(() => {
        this.hide()
      }, this.properties.autoHide)
    },
    
    /**
     * 清除自动隐藏定时器
     */
    clearAutoHide() {
      if (this.data.timer) {
        clearTimeout(this.data.timer)
        this.setData({ timer: null })
      }
    },
    
    /**
     * 获取加载器组件
     */
    getLoaderComponent() {
      const { loaderType, loaderSize, loaderColor } = this.properties
      
      return {
        type: loaderType,
        size: loaderSize,
        color: loaderColor
      }
    },
    
    /**
     * 获取容器样式
     */
    getContainerStyle() {
      const { backgroundColor } = this.properties
      const { animating } = this.data
      
      let style = `background-color: ${backgroundColor};`
      
      if (animating) {
        style += 'transition: opacity 0.3s ease;'
      }
      
      return style
    }
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      // 组件实例进入页面节点树时执行
      if (this.properties.show) {
        this.show()
      }
    },
    
    detached() {
      // 组件实例被从页面节点树移除时执行
      this.clearAutoHide()
    }
  },

  /**
   * 属性监听器
   */
  observers: {
    'show': function(newVal) {
      if (newVal) {
        this.show()
      } else {
        this.hide()
      }
    },
    
    'type': function(newVal) {
      // 根据类型设置自动隐藏
      if (newVal === 'success' && this.properties.autoHide === 0) {
        // 成功状态默认2秒后自动隐藏
        this.setData({ autoHide: 2000 })
        this.setAutoHide()
      }
    }
  }
})